<template>
  <div class="contain">
    <div class="article-l">
      <left-card @checkSideTab="checkSideTab"></left-card>
    </div>
    <div class="article-center">
      <question-card
        v-for="item in articleList"
        :key="item.id"
        :questionTitle="item.articleTitle"
        :questionAnswer="item.articleContent"
        :questionType="item.articleType"
        :createdAt="item.createdAt"
        :id="item.id"
        :lookNum="item.lookNum"
        :preView="item.articlePreView"
        @goDetail="goArticleDetail"
      ></question-card>
      <div style="margin-top: 20px; padding-bottom: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="article-r">
      <el-button class="writeBtn" type="parimary" @click="goToWrite"
        >去写文章</el-button
      >
      <side-card
        :hotList="hotArticles"
        @goHotDetail="goHotArticleDetail"
        :type="2"
      ></side-card>
    </div>
  </div>
</template>

<script>
import LeftCard from '@/components/LeftCard.vue'
import QuestionCard from '@/components/QuestionCard.vue'
import SideCard from '@/components/SideCard.vue'
import { getArticle, getHotArticles } from '@/api/api'
export default {
  components: {
    QuestionCard,
    LeftCard,
    SideCard,
  },
  created() {
    if (this.$route.query?.data) {
      this.type = JSON.parse(this.$route.query?.data)?.item?.value;
    } else {
      this.type = -1;
    }
    this.getArticles();
    getHotArticles().then((res) => {
      console.log(res.data.data);
      this.hotArticles = res.data.data.map((item) => {
        const { articleTitle, ...rest } = item;
        return {
          questionTitle: articleTitle,
          ...rest,
        };
      });
    });
  },
  data() {
    return {
      hotArticles: [],
      articleList: [],
      curentPage: 1,
      pageSize: 10,
      type: -1,
      total: 0
    }
  },
  methods: {
    goHotArticleDetail(item) {
      this.$router.push({
        path: `/articleDetail/${item.id}`
      })
    },
    checkSideTab(index) {
      this.type = index
      this.getArticles()
    },
    // 获取面经
    getArticles() {
      const data = {
        curentPage: this.curentPage,
        pageSize: this.pageSize,
        type: this.type
      }
      getArticle(data).then((res) => {
        const data = res.data.data
        this.articleList = data.rows
        this.total = data.count
        console.log(res)
      })
    },
    goToWrite() {
      this.$router.push('/editor')
    },
    goArticleDetail(id) {
      console.log(id)
      this.$router.push({
        path: `/articleDetail/${id}`
      })
    },
    // 选择每页展示几条
    handleSizeChange(val) {
      this.pageSize = val
      this.getArticles()
      console.log(`每页 ${val} 条`)
    },
    // 选择去几页
    handleCurrentChange(val) {
      this.curentPage = val
      this.getArticles()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input .el-input__inner {
  padding: 10px 15px;
  height: 10px;
  letter-spacing: 1px;
  border: 1px solid #dcdfe6;
}
::v-deep .el-input .el-input__inner::-webkit-input-placeholder {
  color: #999;
  font-size: 13px;
}
.contain {
  width: 1200px;
  margin: 0 auto;
  margin-top: 76px;
  display: flex;
  .article-l {
  }
  .article-center {
    flex: 1;
  }
  .article-r {
    margin-left: 10px;
    .el-button {
      width: 100%;
      margin: 6px 0;
      color: rgb(76, 167, 225);
    }
  }
}
</style>